﻿<UserControl
    x:Class="WindowsStoreSample.VirtualJoystick"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WindowsStoreSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Height="343.151" Width="359.932">

    <Grid Background="Transparent" >

        <Canvas x:Name="Base" Margin="0" Width="340" Height="340">
            <Ellipse HorizontalAlignment="Left" Height="340" VerticalAlignment="Top" Width="340">
                <Ellipse.Fill>
                    <SolidColorBrush Color="#FF2C2A2A">

                    </SolidColorBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse HorizontalAlignment="Left" Height="170" VerticalAlignment="Top" Width="170" Canvas.Left="84" Canvas.Top="84">
                <Ellipse.Fill>
                    <SolidColorBrush Color="#FF0E0E0E">

                    </SolidColorBrush>
                </Ellipse.Fill>
            </Ellipse>
            <Path Data="M205.75,65.625 L226.875,47.25 L248.5,65.625 z" Fill="#FF575757" HorizontalAlignment="Left" Height="18.375" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="42.75" Canvas.Left="147.875" Canvas.Top="37.625"/>
            <Path Data="M205.75,65.625 L226.875,47.25 L248.5,65.625 z" Fill="#FF575757" HorizontalAlignment="Left" Height="18.375" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="42.75" RenderTransformOrigin="0.5,0.5" Canvas.Left="147.875" Canvas.Top="284.125">
                <Path.RenderTransform>
                    <CompositeTransform ScaleY="-1"/>
                </Path.RenderTransform>
            </Path>
            <Path Data="M205.75,65.625 L226.875,47.25 L248.5,65.625 z" Fill="#FF575757" HorizontalAlignment="Left" Height="18.375" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="42.75" RenderTransformOrigin="0.5,0.5" Canvas.Left="270.875" Canvas.Top="162.125">
                <Path.RenderTransform>
                    <CompositeTransform Rotation="-90" ScaleY="-1" ScaleX="-1"/>
                </Path.RenderTransform>
            </Path>
            <Path Data="M205.75,65.625 L226.875,47.25 L248.5,65.625 z" Fill="#FF575757" HorizontalAlignment="Left" Height="18.375" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="42.75" RenderTransformOrigin="0.5,0.5" Canvas.Left="24.375" Canvas.Top="163.625">
                <Path.RenderTransform>
                    <CompositeTransform Rotation="90" ScaleY="-1"/>
                </Path.RenderTransform>
            </Path>

            <Canvas x:Name="Knob" VerticalAlignment="Top" HorizontalAlignment="Left" Width="0" Height="0" RenderTransformOrigin="0.5,0.5" Canvas.Left="125" Canvas.Top="125" >
                <Ellipse x:Name="Shadow" HorizontalAlignment="Left" Height="88" VerticalAlignment="Top" Width="86" Fill="#52131212" Canvas.Left="22" Canvas.Top="18"/>
                <Ellipse x:Name="KnobBase" HorizontalAlignment="Left" Height="90" VerticalAlignment="Top" Width="90" RenderTransformOrigin="0.5,0.5" Canvas.Top="1">
                    <Ellipse.Fill>
                        <SolidColorBrush Color="#FDFF0000">
                            <!--<GradientStop Color="#FFF04A4A"/>
                            <GradientStop Color="#FF6C0202" Offset="1"/>-->
                        </SolidColorBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Ellipse HorizontalAlignment="Left" Height="72.722" VerticalAlignment="Top" Width="72.936" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" Canvas.Left="0.631" Canvas.Top="4.896">
                    <Ellipse.Fill>
                        <SolidColorBrush Color="Red"></SolidColorBrush>
                    </Ellipse.Fill>
                    <Ellipse.RenderTransform>
                        <CompositeTransform Rotation="-31.733"/>
                    </Ellipse.RenderTransform>
                </Ellipse>
                <Ellipse HorizontalAlignment="Left" Height="37" VerticalAlignment="Top" Width="39" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" Canvas.Left="14.001" Canvas.Top="11.001">
                    <Ellipse.RenderTransform>
                        <CompositeTransform SkewX="-8"/>
                    </Ellipse.RenderTransform>
                    <Ellipse.Fill>
                        <SolidColorBrush Color="#FFFF8989"></SolidColorBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Path Data="M9.74935,11.916 L13.084,15.166 L12.1668,16.833 L11.3333,18.583 L10.4999,20.416 L9.24961,20.833 L6.99967,20.583 L6.75,18.333 L7.66697,15.333 L8.75037,12.916 z M3.6672,9.74999 L7.084,10.083 L5.75037,12.25 L4.66704,14 L4.33365,16.583 L4.25036,18.75 L4.41695,20.5 L0,20.166 L0.16699,16.916 L1.16693,13.833 L2.50016,11.583 z M18.1671,6.33301 L21.167,6.33301 L21.667,8.5 L20.75,9.75 L18.5841,10.833 L15.8337,13 L12.584,8.83301 L15.2502,7 z M20.917,0 L20.917,3.16601 L18.1674,2.99999 L15.8337,3.583 L13.5837,4.833 L11.3337,5.99999 L10.5003,6.416 L8.584,3.833 L11.0842,2.41601 L13.3341,0.833006 L16.417,0.166016 z" Fill="#99EEEEEE" HorizontalAlignment="Left" Height="20.833" Stretch="Fill" UseLayoutRounding="False" VerticalAlignment="Top" Width="21.667" Canvas.Left="18.166" Canvas.Top="15.917"/>

                <Canvas.RenderTransform>
                    <TranslateTransform x:Name="knobPosition"/>
                </Canvas.RenderTransform>

                <Canvas.Resources>
                    <Storyboard x:Name="centerKnob" Completed="centerKnob_Completed">
                        <DoubleAnimation Storyboard.TargetName="knobPosition" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2">
                            <DoubleAnimation.EasingFunction>
                                <BackEase EasingMode="EaseInOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                        <DoubleAnimation Storyboard.TargetName="knobPosition" Storyboard.TargetProperty="Y" To="0" Duration="0:0:0.2">
                            <DoubleAnimation.EasingFunction>
                                <BackEase EasingMode="EaseInOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </Canvas.Resources>
            </Canvas>
        </Canvas>
    </Grid>
</UserControl>
